<template>
	<div class="box" style="height: 100vh">
		<div class="background" style="height: 100vh">
			<el-carousel style="width: 100%; height: 100%" arrow="never" :loop="true">
				<el-carousel-item>
					<img src="../assets/1.jpg" width="100%" />
				</el-carousel-item>
				<el-carousel-item>
					<img src="../assets/2.jpg" width="100%" />
				</el-carousel-item>
				<el-carousel-item>
					<img src="../assets/3.jpg" width="100%" />
				</el-carousel-item>
				<el-carousel-item>
					<img src="../assets/4.jpg" width="100%" />
				</el-carousel-item>
			</el-carousel>
		</div>
		<div class="comelogin">
			<h1>登录<span>欢迎使用悦朋软件</span></h1>
			<el-form class="demo-ruleForm">
				<el-form-item>
					<el-input suffix-icon="el-icon-user" type="text" placeholder="请输入用户" v-model="user.name"></el-input>
				</el-form-item>
				<el-form-item>
					<el-input suffix-icon="el-icon-goods" type="password" placeholder="请输入密码" v-model="user.password">
					</el-input>
				</el-form-item>
				<el-form-item>
					<el-input type="text" placeholder="验证码" style="width: 130px"></el-input>
					<img style="vertical-align: middle; margin-left: 40px"
						:src="'http://dida100.com/include/vdimgck.php'" />
					<span> 换一换</span>
				</el-form-item>
				<el-form-item>
					<el-button class="btn" @click="$store.dispatch('login', user)">提交</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				user: {
					name: "",
					password: "",
				},
			};
		},
		created() {
			window.document.title = "登录"
		}
	};
</script>
<style lang="scss" scoped>
	.comelogin {
		h1 {
			width: 100%;
			text-align: center;
			color: rgb(81, 142, 243);

			span {
				font-size: 18px;
				color: gray;
			}
		}
	}
</style>
<style>
	.el-carousel__container {
		position: relative;
		height: 100%;
	}

	.el-button {
		background-color: rgb(38, 128, 240);
		width: 80%;
		color: white;
		border-radius: 20px;
	}

	.comelogin[data-v-5c6101e4] {
		display: flex;
		align-items: center;
		flex-direction: column;
		width: 450px;
		position: absolute;
		z-index: 998;
		top: 26%;
		right: 10%;
		background-color: rgb(249, 249, 248);
		border-radius: 20px;
		box-shadow: 0 6px 4px rgb(231 225 225);
	}

	.btn {
		width: 320px;
	}
</style>
